<template>
  <form-dialop
    :title="type === 'create' ? $t('order.enterOrderAssets') : $t('order.editOrderAssets')"
    :visible="visible"
    width="35%"
    @handleClose="handleClose"
		v-loading="loading"
  >
    <template #content>
      <el-form ref="form" :model="formData" :rules="type === 'create' ? formRule : eidtformRule" label-width="120px" v-loading="loading">
        <el-form-item v-if="type === 'create'" :label="$t('order.desktopId')" prop="machine_id" name="machine_id">
          <el-input v-model="formData.machine_id" @keyup.enter.native="submit"></el-input>
        </el-form-item>
				<el-form-item v-if="type === 'create'" :label="$t('order.desktopName')" prop="desktop_name" name="desktop_name">
          <el-input  v-model="formData.desktop_name" @keyup.enter.native="submit"></el-input>
        </el-form-item>
				<el-form-item  :label="$t('order.desktopSpecifications')" prop="specification_code" name="specification_code">
          <!-- <el-input v-model="formData.specification_code" @keyup.enter.native="submit"></el-input> -->
          <el-select v-model="formData.specification_code">
						<el-option
							v-for="item in specification_enum"
							:key="item.id"
							:label="$t('desktopManage.specifications.' + item.value)"
							:value="item.id">
						</el-option>
					</el-select>
        </el-form-item>
				<el-form-item :label="$t('order.imageType')" prop="mirror_code" name="mirror_code">
          <el-select v-model="formData.mirror_code">
						<el-option
							v-for="item in mirror_code_enum"
							:key="item.id"
							:label="item.value"
							:value="item.id">
						</el-option>
					</el-select>
          <!-- <el-input v-model="formData.mirror_code" @keyup.enter.native="submit"></el-input> -->
        </el-form-item>
				<el-form-item :label="$t('order.diskSize')" prop="data_disk_size" name="data_disk_size">
          <el-input type="number" class="number" :min="0" :max="2048" @input="(value) => formData.data_disk_size = parseInt(value)" v-model="formData.data_disk_size" @keyup.enter.native="submit"></el-input>
        </el-form-item>
				<el-form-item :label="$t('order.bandwidth')" prop="band_width" name="band_width">
          <el-input type="number" class="number" :min="0" :max="2048" @input="(value) => formData.band_width = parseInt(value)" v-model="formData.band_width" @keyup.enter.native="submit"></el-input>
        </el-form-item>
				<el-form-item :label="$t('order.loginAddress')" prop="login_url" name="login_url">
          <el-input v-model="formData.login_url" @keyup.enter.native="submit"></el-input>
        </el-form-item>
				<el-form-item v-if="type === 'edit'" :label="$t('order.isDelete')" prop="is_deleted" name="is_deleted">
          <el-switch
            :class="language === 'zh' ? 'el-switch-delete' :'el-switch-delete-en'"
            v-model="formData.is_deleted">
          </el-switch>
        </el-form-item>
				<el-form-item v-if="type === 'create'" :label="$t('order.dekstopUser')" prop="username" name="username">
          <el-input v-model="formData.username" @keyup.enter.native="submit"></el-input>
        </el-form-item>
				<el-form-item v-if="type === 'create'" :label="$t('order.desktopPassword')" prop="ad_account_password" name="ad_account_password">
          <el-input show-password v-model="formData.ad_account_password" @keyup.enter.native="submit"></el-input>
        </el-form-item>
			</el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
import { AppModule } from '../../../store/modules/app';
import { isValidURL } from '../../../utils/validate';
export default Vue.extend({
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      type: "create",
      language: AppModule.language,
      formData: {
        order_id: "",
        machine_id: "",
				desktop_name: "",
				specification_code: "",
				mirror_code: "",
				data_disk_size: 100,
				band_width: 100,
				login_url: "",
				is_deleted: false,
				username: "",
				ad_account_password: ""
      },
      formRule: {
        machine_id: [
          { required: true, message: this.$t('order.formValite.desktopId'), trigger: 'blur' },
          { max: 40, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ],
        desktop_name: [
          { required: true, message: this.$t('order.formValite.desktopName'), trigger: 'blur' },
          { max: 30, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ],
        specification_code: [
          { required: true, message: this.$t('order.formValite.desktopSpecifications'), trigger: 'blur' },
          { max: 30, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ],
        mirror_code: [
          { required: true, message: this.$t('order.formValite.imageType'), trigger: 'blur' },
          { max: 30, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ],
        data_disk_size: [
          { required: true, message: this.$t('order.formValite.diskSize'), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
            if ( value !== '' && value > 2048) {
                callback(new Error(this.$t('order.formValite.maxDiskSize').toString()))
              } else {
                callback()
              }
          }, trigger: 'blur'}
        ],
        band_width: [
          { required: true, message: this.$t('order.formValite.bandwidth'), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
            if ( value !== '' && value > 2048) {
                callback(new Error(this.$t('order.formValite.maxBandWidth').toString()))
              } else {
                callback()
              }
          }, trigger: 'blur'}
        ],
        login_url: [
          { required: true, message: this.$t('order.formValite.loginAddress'), trigger: 'blur' },
          { max: 100, message: (this as any).$t("order.formValite.maxlength100"), trigger: 'change' },
          { validator: (rule: any, value: any, callback: any) => {
            if ( value !== '' && !isValidURL(value)) {
                callback(new Error(this.$t('order.formValite.loginUrlErr').toString()))
              } else {
                callback()
              }
          }, trigger: 'blur'},
        ],
        username: [
          { required: true, message: this.$t('order.formValite.dekstopUser'), trigger: 'blur' },
          { max: 30, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ],
        ad_account_password: [
          { required: true, message: this.$t('order.formValite.desktopPassword'), trigger: 'blur' },
          { max: 30, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ],
      },
      eidtformRule: {
        specification_code: [
          { required: true, message: this.$t('order.formValite.desktopSpecifications'), trigger: 'blur' },
          { max: 30, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ],
        mirror_code: [
          { required: true, message: this.$t('order.formValite.imageType'), trigger: 'blur' },
          { max: 30, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ],
        data_disk_size: [
          { required: true, message: this.$t('order.formValite.diskSize'), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
            if ( value !== '' && value > 2048) {
                callback(new Error(this.$t('order.formValite.maxDiskSize').toString()))
              } else {
                callback()
              }
          }, trigger: 'blur'}
        ],
        band_width: [
          { required: true, message: this.$t('order.formValite.bandwidth'), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
            if ( value !== '' && value > 2048) {
                callback(new Error(this.$t('order.formValite.maxBandWidth').toString()))
              } else {
                callback()
              }
          }, trigger: 'blur'}
        ],
        login_url: [
          { required: true, message: this.$t('order.formValite.loginAddress'), trigger: 'blur' },
          { max: 100, message: (this as any).$t("order.formValite.maxlength100"), trigger: 'change' },
          { validator: (rule: any, value: any, callback: any) => {
            if ( value !== '' && !isValidURL(value)) {
                callback(new Error(this.$t('order.formValite.loginUrlErr').toString()))
              } else {
                callback()
              }
          }, trigger: 'blur'},
        ],
      },
      data: {},
      specification_enum: [
        { id: '0', value: "2c4g" },
        { id: '1', value: "4c8g" },
        { id: '2', value: "8c16g" }
      ],
      mirror_code_enum: [
        { id: '0', value: 'winserver2016' },
        { id: '1', value: 'winserver2008' },
        { id: '2', value: 'win7'},
        { id: '3', value: 'win10'}
      ]
    }
  },
  created() {
  },
  methods: {
   async init(type: any, data: any) {
		 console.log(data);
		  this.type = type;
      this.data = data;
			this.formData = {
        order_id: "",
        machine_id: "",
				desktop_name: "",
				specification_code: "",
				mirror_code: "",
				data_disk_size: 100,
				band_width: 100,
				login_url: "",
				is_deleted: false,
				username: "",
				ad_account_password: ""
      };
      if (type === 'edit') {
        this.formData.specification_code = data.specification_code;
        this.formData.mirror_code = data.mirror_code;
        this.formData.data_disk_size = data.data_disk_size;
        this.formData.band_width = data.band_width;
        this.formData.login_url = data.login_url;
        this.formData.is_deleted = data.is_deleted;
      }
      this.$nextTick(() => {
          if (this.$refs['form']) {
            (this.$refs['form'] as any).clearValidate();
          }
      })
			this.visible = true;
    },
    submit() {
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
          let PromiseArray: any = [];
          this.formData.order_id = (this.data as any).order_id;
					if (this.type === 'create') {
            PromiseArray.push((this as any).$orinusApi.createOrderDesktop(this.formData));
          } else {
            PromiseArray.push((this as any).$orinusApi.editOrderDesktop((this.data as any).id, this.formData))
          }

          Promise.all(PromiseArray).then((res: any) => {
            console.log(res);
            this.loading = false;
            if (res[0].code === 200 || !res[0].code) {
              this.visible = false;
              this.$emit("success");
              if (this.type === 'create') {
                this.$message({
                  message: this.$t("order.enterOrderAssetsSuccess").toString(),
                  type: "success",
                });
              } else {
                this.$message({
                  message: this.$t("order.editOrderAssetsSuccess").toString(),
                  type: "success",
                });
              }
            } else {
              this.$message({
                message: this.$t("message.actionError").toString(),
                type: "warning",
              });
            }
          }).catch((err: any) => {
            this.loading = false;
            this.$message({
              message: this.$t("message.actionError").toString(),
              type: "warning",
            });
          })
        }
      });
    },
    handleClose() {
      this.formData = {
        order_id: "",
        machine_id: "",
				desktop_name: "",
				specification_code: "",
				mirror_code: "",
				data_disk_size: 100,
				band_width: 100,
				login_url: "",
				is_deleted: false,
				username: "",
				ad_account_password: ""
      },
      this.visible = false;
			this.loading = false;
    }
  }
})
</script>
